<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码</title>
</head>

<body>
    <div class="v-code">
        <div class="code-show">
            <span id="checkCode" class="code">ad134d</span>

            <a href="" id="linkBt">看不清换一张</a>

        </div>
        <div class="input-code">
            <!-- for,inputCode -->
            <label for="inputCode">验证码：</label>

            <input type="text" id="inputCode">

            <span id="text-show"></span>
        </div>
        <input id="btn" type="button" value="确定">
    </div>
    <script>

        // let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        // // 在这里定义一个''，用来接收
        // let str = ''
        // for (let index = 0; index < 6; index++) {

        //     let num = Math.round(Math.random() * (15 - 0) + 0)
        //     str += arr[num]
        // }
        // console.log(str);

        const btn = document.getElementById('btn')
        const inputCodeElement = document.getElementById('inputCode')
        const checkCode = document.getElementById('checkCode')
        const textShow = document.getElementById('text-show')
        const linkBt = document.getElementById('linkBt')

        const getCode = () => {
            let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']

            // 在这里定义一个''，用来接收
            let str = ''
            for (let index = 0; index < 6; index++) {

                let num = Math.round(Math.random() * (15 - 0) + 0)
                str += arr[num]
            }
            return str
            console.log(str);
        }

        // res全局变量
        let res = getCode()

        window.onload = () => {
            let res = getCode()
            render()
        }

        const render = () => {
            checkCode.innerText = res
            linkBt.onclick = () => {
                checkCode.innerText = getCode()
            }
        }

        btn.onclick = () => {
            let code = checkCode.innerText
            // 变量名
            let inputCode = inputCodeElement.value
            if (code != inputCode) {
                alert('验证码不正确');
                // 清空输入框
                inputCode.value = ''
                return false
            }
        }
    </script>
</body>

</html>